<template>
    <div style="width: 100%;height: 100%;position: relative;">
        <div id="map" style="width: 100%;height: 100%;"></div>
        <!--左上角工具栏-->
        <div style="
            position: absolute;
            left: 20px;top: 10px;
            border: 3px solid rgba(5, 73, 146, 1);
            background-color: rgba(255, 13, 69, 0.4);
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 10px;
        ">
            <el-button size="mini" @click="activate('marker')" round style="width: 100px;margin-left: 0 !important;">画点</el-button>
        </div>
        <!--右上角工具栏-->
        <div style="
            position: absolute;
            right: 20px;top: 10px;
            border: 3px solid rgba(5, 73, 146, 1);
            background-color: rgba(255, 13, 69, 0.4);
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 10px;
        ">
            <el-button size="mini" @click="activate('polyline')" round style="width: 100px;margin-left: 0 !important;">画线</el-button>
            <el-button size="mini" @click="activate('curve')" round style="width: 100px;margin-left: 0 !important;">画曲线</el-button>
            <el-button size="mini" @click="activate('arc')" round style="width: 100px;margin-left: 0 !important;">画弓形</el-button>
            <el-button size="mini" @click="activate('freeLine')" round style="width: 100px;margin-left: 0 !important;">画自由线</el-button>
        </div>
        <!--左下角工具栏-->
        <div style="
            position: absolute;
            left: 20px;bottom: 10px;
            border: 3px solid rgba(5, 73, 146, 1);
            background-color: rgba(255, 13, 69, 0.4);
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 10px;
        ">
            <el-button size="mini" @click="activate('rectangle')" round style="width: 100px;margin-left: 0 !important;">画矩形</el-button>
            <el-button size="mini" @click="activate('circle')" round style="width: 100px;margin-left: 0 !important;">画圆</el-button>
            <el-button size="mini" @click="activate('ellipse')" round style="width: 100px;margin-left: 0 !important;">画椭圆</el-button>
            <el-button size="mini" @click="activate('lune')" round style="width: 100px;margin-left: 0 !important;">画弓形</el-button>
            <el-button size="mini" @click="activate('sector')" round style="width: 100px;margin-left: 0 !important;">画扇形</el-button>
            <el-button size="mini" @click="activate('closedCurve')" round style="width: 100px;margin-left: 0 !important;">画闭合曲面</el-button>
            <el-button size="mini" @click="activate('polygon')" round style="width: 100px;margin-left: 0 !important;">画多边形</el-button>
            <el-button size="mini" @click="activate('freePolygon')" round style="width: 100px;margin-left: 0 !important;">画自由面</el-button>
        </div>
        <!--右下角工具栏-->
        <div style="
            position: absolute;
            right: 20px;bottom: 10px;
            border: 3px solid rgba(5, 73, 146, 1);
            background-color: rgba(255, 13, 69, 0.4);
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 10px;
        ">
            <el-button size="mini" @click="activate('doubleArrow')" round style="width: 100px;margin-left: 0 !important;">画双向箭头</el-button>
            <el-button size="mini" @click="activate('straightArrow')" round style="width: 100px;margin-left: 0 !important;">画细直箭头</el-button>
            <el-button size="mini" @click="activate('fineArrow')" round style="width: 100px;margin-left: 0 !important;">画粗单尖头箭头</el-button>
            <el-button size="mini" @click="activate('attackArrow')" round style="width: 100px;margin-left: 0 !important;">画进攻方向</el-button>
            <el-button size="mini" @click="activate('assaultDirection')" round style="width: 100px;margin-left: 0 !important;">画粗单直箭头</el-button>
            <el-button size="mini" @click="activate('squadCombat')" round style="width: 100px;margin-left: 0 !important;">画分队战斗行动</el-button>
        </div>
    </div>
</template>
<script>
    import maps from '@/util/bigMap'

    let BM;
    let map;
    let edit;//初始化鼠标绘制的编辑对象
    let draw;//初始化鼠标绘制的编辑对象
    export default {
        mounted() {
            this.initMap();
        },
        beforeDestroy() {
            if (map) {
                map.remove();
            }
        },
        methods: {
            //初始化地图
            initMap() {
                maps.then(() => {
                    BM = window.BM;
                    //这里之后会换成加载瓦片图的地址
                    BM.Config.HTTP_URL = "http://ua.bigemap.com:30081/bmsdk/";
                    map = BM.map('map', 'bigemap.dc-satellite', {
                        crs: BM.CRS.EPSG4326, //坐标参考系统:EPSG4326
                        center: [30.4, 104.5],
                        zoom: 7,
                        zoomControl: false,
                        attributionControl: false,
                    }).addEventListener('zoomend', function (e) {
                        this.zoomLevel = e.target._zoom;
                        console.log('当前级别 : ' + this.zoomLevel);
                    });
                    // 添加街道图层
                    BM.tileLayer("bigemap.dc-street").addTo(map);
                    // 初始化鼠标绘制的编辑对象
                    draw = new BM.Plot.Draw(map, {
                        // 是否允许重复配置
                        repeat: true,
                        // 设置双箭头样式
                        doubleArrow: { color: "pink" },
                        // 配置绘制线的样式
                        polyline: { weight: 5 },
                        // 多边形的填充颜色
                        polygon: {
                            fillColor: "red",
                        },
                    });
                    // 初始化鼠标绘制的编辑对象
                    edit = new BM.Plot.Edit(map, {
                        control: {
                            //是否允许在编辑的时候拖动绘制图形
                            dragging: false,
                            // 顶点图标
                            vertex: {
                                autoRemove: true,
                                withIn: 10,
                                icon: BM.icon({
                                    iconUrl: "bigemap/css/images/plus.png",
                                    iconSize: [16, 16],
                                    iconAnchor: [8, 8],
                                }),
                            },
                            // 加点的图标
                            boundsMarker: {
                                icon: BM.icon({
                                    iconUrl: "bigemap/css/images/dot.png",
                                    iconSize: [16, 16],
                                    iconAnchor: [8, 8],
                                }),
                            },
                            // 点,线，圆等的编辑图标
                            marker: {
                                icon: BM.icon({
                                    iconUrl: "bigemap/css/images/dot.png",
                                    iconSize: [8, 8],
                                    iconAnchor: [4, 4],
                                }),
                            },
                        },
                    });
                    // 地图对象右键事件
                    map.on("contextmenu", () => {
                        draw.disable();//右键完成绘制
                        edit.disable();//右键完成编辑
                    });
                    // 编辑对象监听正在编辑结束
                    edit.on("bm_edit_end", function (e) {
                        console.log('bm_edit_end',e.detail);
                    });
                    //绘制对象监听正在绘制的事件
                    draw.on("bm_draw_end", function (e) {
                        console.log('bm_draw_end',e.detail);
                        e.detail.layer.on("click", function () {
                            draw.isDraw() && draw.disable(), !edit.isEdit() && edit.edit(this);
                        });
                    });
                });
            },
            //activate方法
            activate(e) {
                edit.isEdit() && edit.disable(), draw.enable(e);
            },
        }
    }
</script>